<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
</head>
<body>

  <!-- 月亮底图镂空文字 -->
  <div id="moon_behind" class="circle">
    <h1>中</h1>
    <h1>秋</h1>
  </div>

  <!-- 月亮上色 -->
  <div id="moon_yellow" class="circle">
    <h1>中</h1>
    <h1>秋</h1>
    <div class="heyu">
      <p>但愿人长久千里共婵娟</p>
      <p>MID-Autumn Festival</p>
    </div>
  </div>

<div id="moon_body" class="circle">
  <!-- 右上角兔子 -->
  <div id="rabbit">
    <div class="body">
      <div class="body1"></div>
      <div class="body2"></div>
      <div class="hand1"></div>
      <div class="foot1"></div>
      <div class="foot2"></div>
      <div class="tail"></div>
    </div>
    <div class="head">
      <div class="mouth"></div>
      <div class="ear1"></div>
      <div class="ear2"></div>
    </div>
  </div>

  <!-- 左下角小兔子 -->
  <div id="rabbit_little">
    <p></p>
  </div>
</div>

  <!-- 灯笼 -->
  <div class="lantern" style="--l: 15%;--t: 7%;--scale: .9"></div>
  <div class="lantern" style="--r: 15%;--t: 5%;--scale: 1"></div>
  <div class="lantern" style="--l: 8%;--t: 30%;--scale: .3"></div>
  <div class="lantern" style="--r: 6%;--t: 20%;--scale: .6"></div>
  <div class="lantern" style="--r: 12%;--t: 38%;--scale: .2"></div>


  <!-- 祥云 -->
  <div class="cloud" style="--t: 77%;--scale: .8;--rotateY: 0;--color: #ce7808;--time: 8s;">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
    <div class="cloud4"></div>
    <div class="cloud5"></div>
    <div class="cloud6"></div>
  </div>

  <div class="cloud" style="--t: 77%;--scale: .9;--rotateY: 0;--color: #05aaab;--time: 4s">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
    <div class="cloud4"></div>
    <div class="cloud5"></div>
    <div class="cloud6"></div>
  </div>

  <div class="cloud" style="--t: 52%;--scale: .5;--rotateY: 0;--color: #fff;--time: 0s;">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
    <div class="cloud4"></div>
    <div class="cloud5"></div>
    <div class="cloud6"></div>
  </div>

  <div class="cloud cloud_reverse" style="--t: 68%;--scale: .8;--rotateY: 180deg;--color: #fff;--time: 8s;">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
    <div class="cloud4"></div>
    <div class="cloud5"></div>
    <div class="cloud6"></div>
  </div>

  <div class="cloud cloud_reverse" style="--t: 64%;--scale: .4;--rotateY: 180deg;--color: #fa0e7c;--time: 3s;">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
    <div class="cloud4"></div>
    <div class="cloud5"></div>
    <div class="cloud6"></div>
  </div>

  <div class="cloud cloud_reverse" style="--t: 85%;--scale: .3;--rotateY: 180deg;--color: #6ee136;--time: 0s">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
    <div class="cloud4"></div>
    <div class="cloud5"></div>
    <div class="cloud6"></div>
  </div>

</body>

</html>